<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问属性</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#image").click(function(){
                // attr("属性名"):取值
                // attr("属性名","属性值"):赋值
                console.log("src属性:"+$(this).prop("src"))
                console.log("alt属性:"+$(this).prop("alt"))
                console.log("title属性:"+$(this).prop("title"))
                // 赋值
                $(this).prop("src","../images/1.gif");
                $(this).prop("title","跳个舞吧");
                $(this).removeProp("src");
            })
            $("#username").blur(function(){
               console.log("type属性:"+$(this).attr("type"));
               console.log("id属性:"+$(this).attr("id"));
               console.log("name属性:"+$(this).attr("name"));
               // 获取value属性值时,只能取出HTML元素预定义的value
                // 如果value内容发生了变化,取得仍然是原来的
               console.log("value属性:"+$(this).attr("value"));
            });
            $("#btn").click(function(){
                // 当匹配的元素存在多个时,取值只会取第一个
               console.log("type属性:"+$("input[name='hobbies']").attr("type"));
               console.log("name属性:"+$("input[name='hobbies']").attr("name"));
               console.log("value属性:"+$("input[name='hobbies']").attr("value"));
               console.log("checked属性:"+$("input[name='hobbies']").attr("checked"));
               // 当存在的元素有多个时,会自动为所有元素赋值
                $("input[name='hobbies']").attr("checked",true);
            });
        });
    </script>
</head>
<body>
<img id="image" src="../images/heihei.gif" alt="图片加载失败" title="今天心情不错">
<input type="text" id="username" name="username" value="admin">
<input type="checkbox" name="hobbies" value="1">吃饭
<input type="checkbox" name="hobbies" value="2" checked="checked">睡觉
<input type="checkbox" name="hobbies" value="3">打豆豆
<button id="btn">测试</button>
</body>
</html>